import { defineComponent, reactive, ref, watch } from "vue";
import styles from "./ChordSet.module.less";

export default defineComponent({
  emits: ['confirm'],
  setup(props, { expose, emit }) {
    const beats = ref(['60', '120', '240', '480', '960', '1440', '1920'])
    const chords = ref(['C', 'Cm', 'C7', 'Cm7', 'CM7', 'D', 'Dm', 'D7', 'Dm7', 'DM7', 'E', 'Em', 'E7', 'Em7', 'EM7', 'F', 'Fm', 'F7', 'Fm7', 'FM7', 'G', 'Gm', 'G7', 'Gm7', 'GM7', 'A', 'Am', 'A7', 'Am7', 'AM7', 'B', 'Bm', 'B7', 'Bm7', 'BM7'])
    const state = reactive({
      isOpen: false,
      beat: null,
      chord: null,
    })
    const open = () => {
      state.isOpen = true;
    }
    const confirm = () => {
      state.isOpen = false;
      emit("confirm", {
        beat: state.beat,
        chord: state.chord,
      });
    }
    watch(() => state.isOpen, (nv) => {
      if (!nv) {
        state.beat = null;
        state.chord = null;
      }
    })
    expose({
      open,
    })
    return () => (
      state.isOpen &&
      <div class={styles.chordSetFloating}>
        <div class={styles.chordSetCard}>
          <div class={styles.header}>设置和弦</div>
          <div class={styles.container}>
            <a-select style={{ width: "100%" }} v-model:value={state.chord} placeholder="请选择和弦">
              {
                chords.value.map((item) => (
                  <a-select-option value={item}>{item}</a-select-option>
                ))
              }
            </a-select>
            <a-select style={{ width: "100%",marginTop: "15px" }} v-model:value={state.beat} placeholder="请选择节拍">
              {
                beats.value.map((item) => (
                  <a-select-option value={item}>{item}</a-select-option>
                ))
              }
            </a-select>
          </div>
          <div class={styles.footer}>
            <a-button onClick={() => { state.isOpen = false }}>取消</a-button>
            <a-button type="primary" onClick={() => { confirm() }}>确认</a-button>
          </div>
        </div>
      </div>
    )
  }
})